<template>
  <div id="adsDialog" class="dialog" v-if="visible" @click="handleCancel">
    <div class="dialog_body">
      <img src="../assets/ads.jpg" alt="" @click="touchImage" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['close'])

const imgState = ref(true)

const touchImage = (e: MouseEvent) => {
  e.stopPropagation()
  imgState.value = false
}
const handleCancel = (e: MouseEvent) => {
  e.stopPropagation()
  imgState.value = false
}

watch(
  () => imgState.value,
  (newValue) => {
    if (!newValue) {
      emit('close')
      imgState.value = true
    }
  },
)
</script>

<style lang="scss" scoped>
.dialog {
  .dialog_body {
    width: 85%;
  }
}
</style>
